<template>
  <div class="Service_Management_2">
    <div class="query">
      <span style="margin-right:10px">业务模块</span>
      <el-select
        v-model="query.businessModule"
        clearable
        placeholder="请选择"
        size="mini"
      >
        <el-option
          v-for="item in ModeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span style="margin:0 10px">服务类型</span>
      <el-select
        v-model="query.serviceType"
        clearable
        placeholder="请选择"
        size="mini"
      >
        <el-option label="请求响应" :value="1"> </el-option>
        <el-option label="发布订阅" :value="2"> </el-option>
      </el-select>
      <span style="margin:0 10px">业务类型</span>
      <el-select
        v-model="query.businessType"
        clearable
        placeholder="请选择"
        size="mini"
      >
        <el-option label="字典" :value="1"> </el-option>
        <el-option label="业务" :value="2"> </el-option>
      </el-select>
      <el-input
        style="width:300px;display:inline-block;margin:0 10px"
        size="mini"
        placeholder="请输入服务编码/名称查询"
        v-model="query.keyword"
      ></el-input>
      <el-button size="mini" icon="el-icon-search" @click="getList"
        >搜索</el-button
      >
      <el-button
        size="mini"
        icon="el-icon-plus"
        @click="open(false)"
        type="primary"
        >新增服务</el-button
      >
    </div>
    <div class="body">
      <div
        class="main_box"
        style="margin:10px;overflow:auto"
        v-loading="isLoading"
      >
        <el-card
          class="box-card card_item"
          v-for="i in listItem"
          :key="i.id"
          style="width:260px;height:95px"
          @click.native="open(i)"
        >
          <p class="del">
            <span @click.stop="del(i.Id)" class="todo">&nbsp;x&nbsp;</span>
          </p>

          <el-row>
            <el-col :span="4">
              <!-- <el-switch
                v-model="i.Status == 1 ? true : false"
                active-color="rgb(64,158,255)"
                inactive-color="#ccc"
                @change="swich_change(i, $event)"
              >
              </el-switch> -->
              <i
                v-if="!i.status"
                :style="
                  i.Status
                    ? 'color:#409eff;font-size:32px;'
                    : 'color:#ccc;font-size:32px'
                "
                :class="i.Status ? 'el-icon-open' : 'el-icon-turn-off'"
              ></i>
            </el-col>
            <el-col :span="20">
              <div :title="i.Name" class="card_item_name">
                {{ i.Name }}
              </div>
              <div :title="i.Code" class="card_item_id">{{ i.Code }}</div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1100px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div style="margin: 20px;"></div>
      <el-form label-position="left" label-width="120px" :model="addForm">
        <el-form-item label="服务类型：" style="width:33%;display:inline-block">
          <el-select
            v-model="addForm.ServiceType"
            clearable
            placeholder="请选择"
            size="mini"
          >
            <el-option label="请求响应" :value="1"> </el-option>
            <el-option label="发布订阅" :value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务类型：" style="width:33%;display:inline-block">
          <el-select
            v-model="addForm.BusinessType"
            clearable
            placeholder="请选择"
            size="mini"
          >
            <el-option label="字典" :value="1"> </el-option>
            <el-option label="业务" :value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务模块：" style="width:33%;display:inline-block">
          <el-select
            v-model="addForm.BusinessModule"
            clearable
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in ModeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务名称：" style="width:33%;display:inline-block">
          <el-input style="width:200px" v-model="addForm.Name" size="mini">
          </el-input>
        </el-form-item>
        <el-form-item label="服务代码：" style="width:33%;display:inline-block">
          <el-input style="width:200px" v-model="addForm.Code" size="mini">
          </el-input>
        </el-form-item>
        <el-form-item
          label="服务英文名："
          style="width:33%;display:inline-block"
        >
          <el-input
            style="width:200px"
            v-model="addForm.EnglishName"
            size="mini"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="服务描述：" style="width:33%;display:inline-block">
          <el-input
            style="width:200px"
            v-model="addForm.ServiceDesc"
            size="mini"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="排序：" style="width:33%;display:inline-block">
          <el-input style="width:200px" v-model="addForm.Sort" size="mini">
          </el-input>
        </el-form-item>
        <el-form-item label="版本号：" style="width:33%;display:inline-block">
          <el-input style="width:200px" v-model="addForm.Version" size="mini">
          </el-input>
        </el-form-item>
        <el-form-item label="审核状态：" style="width:33%;display:inline-block">
          <span>{{
            addForm.AuditStatus == 0
              ? "待审核"
              : addForm.AuditStatus == 1
              ? "通过"
              : "拒绝"
          }}</span>
        </el-form-item>
        <el-form-item label="审核理由：" style="width:33%;display:inline-block">
          <el-input style="width:200px" v-model="addForm.AuditDesc" size="mini">
          </el-input>
        </el-form-item>
        <el-form-item label="状态：" style="width:33%;display:inline-block">
          <el-switch
            v-model="addForm.Status == 1 ? true : false"
            active-color="rgb(64,158,255)"
            inactive-color="#ccc"
            @change="swich_change"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="btn_ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      query: {
        businessModule: "",
        serviceType: "",
        businessType: "",
        keyword: "",
        page: 1,
        limit: 999,
      },
      ModeList: [],
      listItem: [],
      isLoading: false,
      dialogVisible: false,
      addForm: {
        ServiceType: 1,
        BusinessType: 1,
        BusinessModule: "",
        Code: "",
        Name: "",
        EnglishName: "",
        ServiceDesc: "",
        Sort: "",
        Version: "",
        AuditStatus: "",
        AuditDesc: "",
        Status: "",
      },
      title: "",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.getModes();
    this.getList();
  },
  // 组件方法
  methods: {
    getModes() {
      this.$get("/ServiceManage/ModuleItems").then((res) => {
        this.ModeList = res.data;
      });
    },
    getList() {
      this.$post("/ServiceManage/List", this.query).then((res) => {
        console.log(res);
        this.listItem = res.data.list;
      });
    },
    open(val) {
      console.log(val);
      this.title = "添加";
      if (val) {
        this.addForm = val;
        this.title = val.Name;
      }
      this.dialogVisible = true;
      //   this.$post("/ServiceManage/Create", this.addForm).then((res) => {});
    },
    handleClose() {
      this.addForm = {
        ServiceType: 1,
        BusinessType: 1,
        BusinessModule: "",
        Code: "",
        Name: "",
        EnglishName: "",
        ServiceDesc: "",
        Sort: "",
        Version: "",
        AuditStatus: "",
        AuditDesc: "",
        Status: "",
      };
      this.dialogVisible = false;
    },
    swich_change(val) {
      console.log(val);
      val ? (this.addForm.Status = 1) : (this.addForm.Status = 2);
    },
    btn_ok() {
      let url = this.addForm.Id
        ? "/ServiceManage/Update"
        : "/ServiceManage/Create";
      this.$post(url, this.addForm).then((res) => {
        if (res.code == -1) {
          this.$message.error(res.msg);
          return;
        }
        this.$message.success("操作成功");
        this.handleClose();
        this.getList();
      });
    },
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$post("/ServiceManage/Delete/" + id).then((res) => {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="scss">
.Service_Management_2 {
  padding: 10px;
  .card_item {
    display: inline-block;
    margin: 5px;
  }
  .main_box {
    text-align: none;
    border: 1px solid #ccc;
    height: 800px;
    overflow: auto;
  }
  .card_item_name {
    padding: 0 10px 0 20px;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card_item_id {
    padding: 0 10px 0 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .del {
    display: none;
    position: relative;
    margin: 0;
    padding: 0;
    text-align: right;
    margin-top: -40px;
    top: 20px;
    right: -15px;
    font-size: 26px;
    font-weight: 700;
    .todo {
      cursor: pointer;
    }
  }
  .card_item:hover .del {
    display: block;
  }
}
</style>
